﻿@{
    ViewBag.Title = "Order";
    ViewBag.MenuType = 0;
}

<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
    <title>我的订单 - 123123</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <script>
        !function () {
            var cw = document.documentElement.clientWidth || document.body.clientWidth, zoom = cw / 320;
            if (cw > 640) zoom = 2;
            document.write('<style id="htmlzoom">html{ font-size:' + (zoom * 50) + 'px; }</style>');
            window.addEventListener('resize', function () {
                cw = document.documentElement.clientWidth || document.body.clientWidth, zoom = cw / 320;
                if (cw > 640) zoom = 2;
                document.getElementById('htmlzoom').innerHTML = 'html{ font-size:' + (zoom * 50) + 'px; }';
            });
        }();

        function preventDefault(e) {
            e.preventDefault();
        }
    </script>
    <link rel="stylesheet" type="text/css" href="/css/base.css?v=1.11" />
    <style type="text/css">
        .back-top {
            bottom: .2rem;
        }

        .cover-floor {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            background: rgba(0,0,0,0.7);
            z-index: 900;
        }

        #content {
            padding-top: 2.07rem;
        }

            #content #filter {
                position: fixed;
                width: 100%;
                z-index: 999;
                top: 0;
                left: 0;
            }

                #content #filter .filter-box {
                    position: relative;
                    display: table;
                    width: 100%;
                    background-color: #fff;
                    z-index: 999;
                }

                    #content #filter .filter-box li {
                        position: relative;
                        display: table-cell;
                        width: 14.4%;
                        text-align: center;
                        border-bottom: 1px solid #e3e3e3;
                        border-width: 1px 0;
                    }
                        /*#content #filter .filter-box li:first-child{ width:28%; }*/
                        #content #filter .filter-box li:before {
                            border-right: 1px solid #e7e5e2;
                            height: .3rem;
                            content: '';
                            position: absolute;
                            top: .16rem;
                            left: 0;
                        }

                        #content #filter .filter-box li:first-child:before {
                            border-right-width: 0;
                        }

                        #content #filter .filter-box li label {
                            display: block;
                            height: .66rem;
                            line-height: .66rem;
                            text-align: center;
                        }

                        #content #filter .filter-box li:first-child label.date {
                            position: absolute;
                            width: 1.8rem;
                            padding-top: .1rem;
                            font-size: .2rem;
                            line-height: 1.2;
                        }

                            #content #filter .filter-box li:first-child label.date:before {
                                content: '';
                                position: absolute;
                                content: '';
                                position: absolute;
                                width: .3rem;
                                height: .46rem;
                                left: 0;
                                background: url(/images/ico.png) no-repeat -1.18rem -2.58rem;
                                background-size: 3rem;
                            }

                        #content #filter .filter-box li:first-child label {
                            padding-right: .2rem;
                        }
                        /*#content #filter .filter-box li:first-child label:after { border: .07rem solid transparent; border-top-color: #999; content: ''; position: absolute; top: .28rem; right: .14rem; }*/
                        #content #filter .filter-box li.cur {
                            color: #ea3b4c;
                        }

                #content #filter .filter-list {
                    position: absolute;
                    left: 0;
                    width: 100%;
                    padding: .1rem .2rem;
                    background-color: #f9f8f8;
                    box-sizing: border-box;
                    -webkit-transform: translate3d(0,-100%,0);
                    opacity: 0;
                    pointer-events: none;
                    -webkit-transition: all .3s;
                    z-index: 900;
                }

                    #content #filter .filter-list.show {
                        -webkit-transform: translate3d(0,0,0);
                        opacity: 1;
                        pointer-events: all;
                    }

                    #content #filter .filter-list p {
                        position: relative;
                        margin-top: .1rem;
                        color: #777;
                    }

                        #content #filter .filter-list p:first-child {
                            margin-top: 0;
                        }

                        #content #filter .filter-list p input[type='button'] {
                            width: 1.2rem;
                            margin-right: .18rem;
                            padding: .08rem .18rem;
                            color: #ea3b4c;
                            background-color: #fff;
                            border: solid 1px #ea3b4c;
                            border-radius: .08rem;
                        }

                            #content #filter .filter-list p input[type='button']:active {
                                background-color: #ea3b4c;
                                color: #fff;
                            }

                        #content #filter .filter-list p input[type='text'] {
                            width: 2.6rem;
                            padding: .1rem .2rem;
                            color: #777;
                            border: solid 1px #eee;
                            border-radius: .08rem;
                        }

                        #content #filter .filter-list p em {
                            position: absolute;
                            width: .5rem;
                            height: .5rem;
                            margin-left: -.5rem;
                            background: url(/images/ico.png) no-repeat -1.68rem .17rem;
                            background-size: 2.4rem;
                        }

                    #content #filter .filter-list button {
                        margin: .06rem 0;
                        margin-left: 1.22rem;
                        width: 2.56rem;
                        border-radius: .05rem;
                        border-width: 0;
                        padding: .1rem 0;
                        color: #fff;
                        background-color: #ea3b4c;
                    }

        .content-dropload {
            background-color: #f3f3f3;
        }

        .content-box li.content-row {
            display: block;
            padding: .28rem;
            background-color: #fff;
            border-bottom: solid 1px #f3f3f3;
            margin-top: .2rem;
        }

            .content-box li.content-row:first-child {
                margin-top: 0;
            }

            .content-box li.content-row img.thumb {
                float: left;
                width: 1.8rem;
                height: 1.8rem;
                margin-right: .2rem;
            }

            .content-box li.content-row h3 {
                font-size: .24rem;
                height: .7rem;
                line-height: 1.4;
                overflow: hidden;
            }

            .content-box li.content-row p {
                position: relative;
                font-size: .22rem;
                margin-top: .12rem;
                color: #999;
            }

                .content-box li.content-row p em {
                    margin: 0 .1rem;
                }

                    .content-box li.content-row p em:first-child {
                        margin-left: 0;
                    }

                    .content-box li.content-row p em:last-child {
                        margin-right: 0;
                    }

            .content-box li.content-row .price {
                color: #e74c3c;
                font-size: .24rem;
                font-weight: 700;
            }

        .content-box .account {
            display: table;
            width: 100%;
            color: #666;
            border-top: solid 1px #e7e5e2;
            margin-top: .2rem;
            padding-top: .2rem;
        }

            .content-box .account li {
                position: relative;
                display: table-cell;
                width: 33.33%;
                text-align: center;
            }

                .content-box .account li:before {
                    border-right: 1px solid #e7e5e2;
                    height: .34rem;
                    content: '';
                    position: absolute;
                    top: .12rem;
                    left: 0;
                }

                .content-box .account li:first-child:before {
                    border-right-width: 0;
                }

                .content-box .account li label {
                    display: block;
                    margin-top: .04rem;
                    font-size: .22rem;
                    color: #999;
                }

                .content-box .account li strong {
                    color: #ea3b4c;
                }

        .count-bar {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            padding: .1rem;
            background-color: rgba(255,255,255,.96);
            border-top: solid 1px #ccc;
            z-index: 99;
        }

            .count-bar ul {
                display: table;
                width: 100%;
                color: #666;
            }

            .count-bar li {
                position: relative;
                display: table-cell;
                text-align: center;
            }

                .count-bar li:before {
                    border-right: 1px solid #e7e5e2;
                    height: .34rem;
                    content: '';
                    position: absolute;
                    top: .12rem;
                    left: 0;
                }

                .count-bar li:first-child:before {
                    border-right-width: 0;
                }

                .count-bar li p {
                    margin-top: .04rem;
                    font-size: .22rem;
                    color: #999;
                }

                .count-bar li strong {
                    color: #ea3b4c;
                }

        .dropload-up, .dropload-down {
            position: relative;
            height: 0;
            overflow: hidden;
            font-size: 12px;
            color: #666;
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }

        .dropload-down {
            height: 50px;
            background-color: #fff;
        }

        .dropload-refresh, .dropload-update, .dropload-load, .dropload-noData {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }

            .dropload-load .loading {
                display: inline-block;
                height: 15px;
                width: 15px;
                border-radius: 100%;
                margin: 6px;
                border: 2px solid #999;
                border-bottom-color: transparent;
                vertical-align: middle;
                -webkit-animation: rotate360-Anim 0.75s linear infinite;
                animation: rotate360-Anim 0.75s linear infinite;
            }
    </style>

</head>
<body>
    <div class="cover-floor"></div>
    <section id="content">
        <div id="filter">
            <header id="header">
                <a href="javascript:history.back();" class="icon icon-goback"></a>我的订单
            </header>
            <ul class="filter-box">
                <!--li><label>订单日期</label></li-->
                <li><label><a data-dd="0" href="#" style="color:#ff0000">全部订单</a></label></li>
                <li><label><a data-dd="1" href="#">当日订单</a></label></li>
                <li><label><a data-dd="2" href="#">昨天订单</a></label></li>
                <li><label><a data-dd="3" href="#">本月订单</a></label></li>
            </ul>
            <ul class="filter-box">
                <li><label><a data-zt="0" href="#" style="color:#ff0000">全部</a></label></li>
                <li><label><a data-zt="1" href="#">付款</a></label></li>
                <li><label><a data-zt="2" href="#">结算</a></label></li>
                <li><label><a data-zt="3" href="#">失败</a></label></li>
            </ul>
        </div>
        <div class="content-dropload" id="pageCon">
            <ul class="content-box" id="list_box">

                <!--li class="content-row fadeIn-Anim clearfix" data-id="3161998712938572">
                      <div class="goods">
                        <img class="thumb" src="http://img04.taobaocdn.com/bao/uploaded/i4/TB1NXQoPpXXXXcrXpXXXXXXXXXX_!!0-item_pic.jpg_210x210.jpg" />
                        <div>
                          <h3>ddddd</h3>
                          <p>订单状态：<strong style="color:#ea3b4c;">订单失效</strong></p>
                          <p>交易时间：2017-02-21 11:07</p>
                          <p>&nbsp;</p>
                        </div>
                      </div>
                      <ul class="account">
                        <li><span>￥0.00</span><label>付款金额</label></li>
                        <li><span>￥0.00</span><label>付款佣金</label></li>
                        <li><span class="price">￥0.00</span><label>预估结算</label></li>
                      </ul>
                </li-->


            </ul>
            <div class="dropload-down" id="list_more">
                <div class="dropload-refresh" onclick="get_list(0);">加载中...</div>
            </div>
        </div>
    </section>
    <input type="hidden" id="hd_type" name="hd_type" />
    <input type="hidden" id="hd_timetype" name="hd_timetype" />

    <div class="back-top"><img src="/images/scroll-to-top-icon.png" alt="" style="width:100%;" /></div>
    <!--<section class="count-bar">
      <ul>
        <li><span>100</span><p>单数</p></li>
        <li><span>￥2000.00</span><p>交易总额</p></li>
        <li><span>￥220.00</span><p>预计佣金</p></li>
        <li><strong><span>￥200.00</span></strong><p>结算佣金</p></li>
      </ul>
    </section>-->
    <script src="/js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="/css/dropload.css">
    <script src="/js/dropload.min.js"></script>
    <script type="text/javascript">

        function formatDate(nS) {
            return new Date(parseInt(nS)).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
        }

        $(function () {
            $('[data-dd]').click(function () {
                $('[data-dd]').css('color', '#1f1f1f');
                $('#hd_timetype').val($(this).attr('data-dd'));
                $(this).css('color', 'red');
                get_list(1);
            });
            $('[data-zt]').click(function () {
                $('[data-zt]').css('color', '#1f1f1f');
                $('#hd_type').val($(this).attr('data-zt'));
                $(this).css('color', 'red');
                get_list(1);
            });
        })
        var yjtype = "0";
        var limit = 1;
        function get_list(ty) {

            if (ty == 1) {
                $("#pageCon #list_box").html('');
                limit = 1;
            } else {
                $("#list_more").html('<div class="dropload-refresh"  onclick="get_list(0);">卖命加载中...</div>');
            }

            $.ajax({
                type: "post",
                url: "/agent/orderpost",
                data: {
                    limit: limit,
                    type: $('#hd_type').val(),
                    timetype: $('#hd_timetype').val()
                },
                dataType: "json",
                success: function (data) {

                    if (data.State == 1) {
                        var list = data.Datas;
                        var content = '';
                        for (var i = 0; i < list.length; i++) {

                            content += '<li class="content-row fadeIn-Anim clearfix" data-id="' + list[i]['numid'] + '">';
                            content += '<div class="goods">';
                            //content += ' <img class="thumb" src="' + list[i]['picurl'] + '" />';
                            content += '<div>';
                            content += '<h3>' + list[i]['ProductDes'] + '</h3>';
                            content += '<p>订单状态：<strong style="color:#ea3b4c;">' + list[i]['OrderStateDes'] + '</strong></p>';
                            content += '<p>交易时间：' + formatDate(list[i]['CreateDate'].replace("/Date(", "").replace(")/", "")) + '</p>';
                            content += '<p>订单号：' + list[i]['OrderID'] + '</p>';
                            content += '<p>&nbsp;</p>';
                            content += ' </div>';
                            content += ' </div>';
                            content += '<ul class="account">';
                            content += ' <li><span>￥' + list[i]['PayPrice'] + '</span><label>付款金额</label></li>';
                            //content +='  <li><span>￥'+list[i]['xgyg']+'</span><label>付款佣金</label></li>';
                            content += '  <li><span class="price">￥' + list[i]['EffectPrediction'] + '</span><label>预估结算</label></li>';
                            content += '  </ul>';
                            content += ' </li>';

                        }
                        $("#pageCon #list_box").append(content);
                        var aa = $(".goods-list li").innerWidth();
                        $(".goods-list li img").css('height', aa);
                        if (list.length > 1) {
                            $("#list_more").html('<div class="dropload-refresh"  onclick="get_list(0);">加载中...</div>');
                        } else {
                            $("#list_more").html('<div class="dropload-refresh">没有更多记录！</div>');
                        }
                        limit++;




                        //waterfall();
                        //lazy_img();
                    } else if (data.State == 2) {
                        $("#list_more").html('<div class="dropload-refresh">没有更多记录！</div>');
                        //dialog("没有更多记录！");
                        //$("#list_more").fadeOut(500);

                    } else {
                        $("#list_more").html('<div class="dropload-refresh">没有更多记录！</div>');
                        //dialog("没有更多记录！！");
                        //$("#list_more").fadeOut(500);
                    }
                },
                error: function (xhr, type) {

                }
            });


        }
        get_list(0);


        //==============自动加载=============
        //获取滚动条当前的位置
        function getScrollTop() {
            var scrollTop = 0;
            if (document.documentElement && document.documentElement.scrollTop) {
                scrollTop = document.documentElement.scrollTop;
            }
            else if (document.body) {
                scrollTop = document.body.scrollTop;
            }
            return scrollTop;
        }

        //获取当前可是范围的高度
        function getClientHeight() {
            var clientHeight = 0;
            if (document.body.clientHeight && document.documentElement.clientHeight) {
                clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
            }
            else {
                clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
            }
            return clientHeight;
        }

        //获取文档完整的高度
        function getScrollHeight() {
            return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
        }


        $(window).scroll(function () {
            if (getScrollTop() + getClientHeight() == getScrollHeight()) {
                //alert("到达底部");
                get_list(0);
            }
        });

        //==============自动加载=============


        function waterfall(limit) {
            $container = $('#list_box');
            $container.masonry('reload');
            $container.imagesLoaded(function () {
                lazy_img();
                $container.masonry({
                    itemSelector: '.picCon',
                    isFitWidth: false,//是否根据浏览器窗口大小自动适应默认false
                    //gutter: 20,
                    isAnimated: false,//是否采用jquery动画进行重拍版
                    isRTL: false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
                    isResizable: true,//是否自动布局默认true
                });
            });
        }



    </script>
    <script>$(".back-top").on("tap", function () { if ((typeof (myScroll) != "undefined")) { myScroll.scrollTo(0, 0, 300); } else { scrollTo(0, 0); } });//返回顶部</script>
</body>
</html>
